import React, { useState } from "react";
import { Table, Select, Form, Input, Col, Row, DatePicker, Pagination } from "antd";
import "./css/index.scss";
const { Column } = Table;
const UserSet = () => {
  const [listData, setListData] = useState({
    data: [
      {
        id: 1,
        phone: "12345678912",
        type: "注册登录问题",
        content: "反馈内容反馈内容反馈内容反馈内容反馈内容反馈内馈内容反馈内容反馈内容反馈内容反馈内容反馈内容反馈内容",
        time: "2019 06 21 12:00:00",
        state: 0,
      },
      {
        id: 2,
        phone: "12345678912",
        type: "注册登录问题",
        content: "反馈内容",
        time: "2019 06 21 12:00:00",
        state: 1,
      },
      {
        id: 3,
        phone: "12345678912",
        type: "注册登录问题",
        content: "反馈内容",
        time: "2019 06 21 12:00:00",
        state: 0,
      },
    ],
    count: 0,
  });
  const [current, setCurrent] = useState(1);
  const onChange = (page) => {
    console.log(page);
    setCurrent(page);
  };
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const [search, setSearch] = useState({ page: 1, limit: 10, title: "" });
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="userSet">
      <div className="filter">
        <Form
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Row gutter={16}>
            <Col xs={24} sm={12} md={8} lg={7} xl={3}>
              <Form.Item label="用户手机号" name="username">
                <Input />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={16} lg={11} xl={6}>
              <Form.Item label="反馈时间" name="username">
                <div className="times">
                  <DatePicker placeholder="" style={{display:'inline-block'}}/>
                  <span className="line" style={{display:'inline-block'}}>-</span>
                  <DatePicker placeholder="" style={{display:'inline-block'}}/>
                </div>
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={5} xl={3}>
              <Form.Item label="状态" name="username">
                <Select>
                  <Select.Option value="demo">Demo</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col
              xs={24}
              sm={12}
              md={12}
              lg={{ span: 4, offset: 2 }}
              xl={{ span: 4, offset: 1 }}
            >
              <button className="btn success">重置</button>
              <button className="btn success">查询</button>
            </Col>
          </Row>
        </Form>
      </div>
      <div className="tables">
        <Table
          dataSource={listData.data}
          bordered
          rowKey="id"
          pagination={{
            current: search.page,
            pageSize: search.limit,
            total: listData.count,
          }}
        >
          <Column title="#" dataIndex="id" width={20} key="id" />
          <Column title="用户手机号" dataIndex="phone" width={50} key="phone" />
          <Column title="反馈类型" dataIndex="type" width={150} key="type" />
          <Column title="反馈内容" dataIndex="content" key="content" />
          <Column title="反馈时间" dataIndex="time" width={170} key="time" />
          <Column
            title="状态"
            width={80}
            dataIndex="state"
            key="state"
            render={(state) => (
              <span>
                {state === 0 ? "未处理" : "已处理"}
              </span>
            )}
          />
          <Column
            title="操作"
            width={80}
            fixed="right"
            key="action"
            render={(_, record) => (
              <>
              {
                record.state === 0 ? <button className="btn primary">立即处理</button> : 
                <button className="btn success">查看</button>
              }
              </>
            )}
          />
        </Table>
        <div className="pagination">
            <Pagination current={current} onChange={onChange} total={100} />
        </div>
      </div>
    </div>
  );
};

export default UserSet;
